<template>
  <div class="c-bg-f5" :class="{'theme-market': showMarketingBar}">
    <div class="c-maxh427 c-w100 c-text-hidden">
      <img class="c-w100 imgCloseBig" :src="$addXossFilter(dataInfo.avatar, require('../../../assets/defult270.png'))" alt="" />
    </div>
    <!-- 营销活动倒计时 -->
    <flash-sales-time-new
      v-if="showMarketingBar"
      :type="dataInfo.sales? 'isSale':dataInfo.isFriendHelper ? 'isFa' : dataInfo.bargain ? 'isBargain' : 'isCollage'"
      :price="dataInfo.sales ? dataInfo.sales.price : dataInfo.collage ? dataInfo.collage.captainPrice : dataInfo.bargain ? dataInfo.bargain.reservePrice : ''"
      :from="dataInfo.collage && dataInfo.collage.collageGroupType && dataInfo.collage.collageGroupType == 2 ? 'activity' : ''"
      :startTime="dataInfo.sales ? dataInfo.sales.sales.startTime : dataInfo.bargain ? dataInfo.bargain.startTime : dataInfo.collage ? dataInfo.collage.startTime : dataInfo.faStartAt"
      :endTime="dataInfo.sales ? dataInfo.sales.sales.endTime : dataInfo.bargain ? dataInfo.bargain.endTime : dataInfo.collage ? dataInfo.collage.endTime : dataInfo.faEndAt"
      :originalPrice="dataInfo.price"
      :stock="dataInfo.sales ? dataInfo.sales.balance: ''"
      :stockBargain="dataInfo.bargain && dataInfo.bargain.stock"
      :isLimit="dataInfo.sales && dataInfo.sales.limit == 0 || (dataInfo.bargain && dataInfo.bargain.isLimitStock == 2) ? false : true"
      :salesTag="dataInfo.sales && dataInfo.sales.sales.tags"
      :peopleNum="dataInfo.collage && dataInfo.collage.peopleNum"
      :isPreheat="dataInfo.bargain && dataInfo.bargain.isPreheat"
      :bargainStatus="dataInfo.bargain && dataInfo.bargain.status"
      :optimal="optimal"
      @showCoupon="showCoupon = true"
      @falshSalesTime="falshSalesTime"
      @finishFlashSales="finishFlashSales"
    >
    </flash-sales-time-new>
    <section class="c-bg-white c-bd-b12-f5">
      <div class="c-p c-flex-column c-lh  c-pt24">
        <price-bar class="c-ph0" v-if="(dataInfo.isSaleAlone != -1)&&dataInfo.permission == false && !dataInfo.sales && !dataInfo.isFriendHelper&&!isMarketing"
          :dataInfo="dataInfo"
          :styleType="2"
        >
        </price-bar>
        <discount-info class="c-mt8" v-if="!distributionId && !isiOS && !dataInfo.permission && dataInfo.isSaleAlone == 1 && dataInfo.payType == 2"
          :couponList="couponList"
          :dataInfo="dataInfo"
          :isMarketing="isMarketing"
          @clickShowCoupon="showCoupon = true"
        >
        </discount-info>
        <div class="c-ph24 c-mt20">
          <vip-entry
            :styleType="2"
            :dataInfo="dataInfo"
            v-if="!dataInfo.permission && !$isWxAppIos() && !isiOS && !isMarketing"
          ></vip-entry>
        </div>
        <div class="c-flex-row c-aligni-center c-box c-mt8 c-ph24">
          <span class="c-fs30 c-fw-b c-fc-xblack c-lh48">{{dataInfo.name}}</span>
        </div>
        <div class="c-mt8 c-flex-row c-ph24 c-pb20">
          <div class="c-fs20 c-fc-sblack c-mr20" v-if="dataInfo.payType == 2 && Number(dataInfo.price) != 0">{{!$isWxAppIos() ? '已售' : '已测'}}{{dataInfo.subscribers | formatNumber}}</div>
          <div class="c-fs20 c-fc-sblack c-mr20" v-else>已测{{dataInfo.hasTestNum | formatNumber}}</div>
        </div>
      </div>
      <bargain-rules v-if="dataInfo.bargain != null && !dataInfo.hasPermission" :isPreheat="dataInfo.bargain.isPreheat" :status="dataInfo.bargain.status" class="c-bd-t12-f5"></bargain-rules>
    </section>
    <section class="c-bg-white">
      <my-small-tabbar id="tabhBar" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType"></my-small-tabbar>

      <div class="c-pb120" v-show="typeBar == 0">
        <div class="c-pt40 c-ph24 c-pb20">
          <h2 class="c-fw-n c-fc-xblack c-fs26 c-fw-b">测评详情</h2>
          <div class="c-pt30">
            <div @click="clickDesc" class="tinymce-text c-lh36 c-fc-sblack c-ww-bw c-ww-ba c-contexty-scroll" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="dataInfo.details"></div>
          </div>
        </div>
        <package-index-com :styleType="2"
          @clickGoAllPackage="showCombo=true"
          :relevantTitles="'包含该AI测评的课程'"
          :isExam='cfrom.voiceTest' :showAll="true"
          :proType="9" :proId="libraryId"
          :isHomePage="false"
          :showPackageModal="true"
          :packageList="dataInfo.combos.filter((item,index) => {return index == 0})"
          v-if="dataInfo && dataInfo.combos && dataInfo.combos.length > 0"></package-index-com>
        <!-- <package-index-com :relevantTitles="'包含该AI测评的课程'" :isExam='cfrom.voiceTest' :showAll="true" :proType="11" :proId="paperMainId" :isHomePage="false" :packageList="packageList" v-if="packageList.length > 0 && companyAuth.enableComboModule == 1"></package-index-com> -->
      </div>
      <div class="c-pb120 c-ph24" v-show="typeBar == 2">
        <div v-for="(item, index) in rankingList" :key="index" class="c-flex-row c-pl18 c-pr32 c-pv30 c-justify-sb c-aligni-center" :class="index==rankingList.length-1?'':'c-bd-b1'">
          <div class="c-flex-row c-aligni-center c-w80">
            <div class="c-fs24 c-fc-xblack c-mr40">
              <img class="c-ww32 c-ml10" v-if="index==0" src="../../../assets/i/wap/exam/jinpai.png" alt="" />
              <img class="c-ww32 c-ml10" v-else-if="index==1" src="../../../assets/i/wap/exam/yinpai.png" alt="" />
              <img class="c-ww32 c-ml10" v-else-if="index==2" src="../../../assets/i/wap/exam/tongpai.png" alt="" />
              <span v-else class="c-ml20">{{index+1}}</span>
            </div>
            <img class="c-ww54 c-hh54 c-br30 c-mr16" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.nickname}}</div>
          </div>
          <div class="c-fs24 c-fc-xblack c-flex-shrink0">{{item.totalpoins}}分</div>
        </div>
        <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getRank" v-if="is_page">
          加载更多&nbsp;>
        </div>
        <loading-status-tem :noData="rankingList.length == 0" :noDataText="'暂无排行榜'"></loading-status-tem>
      </div>
    </section>
    <bottom-buy-com
      :ckFrom="77"
      :isNeedPay="!dataInfo.permission && dataInfo.payType == 2"
      :showShareMoneyTip="true"
      :deductibleAfterInvition="dataInfo.commission"
      :showFriendHelper="dataInfo.payType != 3 && dataInfo.payType != 1 && Number(dataInfo.realPrice) != 0 && dataInfo.permission == false && companyAuth.enableFriendHelper == 1 && dataInfo.isFriendHelper == true"
      :friendHelperStatus="faStatus"
      :showBuyButton="(dataInfo.permission == false && dataInfo.payType == 2 && Number(dataInfo.realPrice) != 0 && (companyAuth.enableFriendHelper == 0 || dataInfo.isFriendHelper == false) && !isSales)
        || (isSales && dataInfo.payType != 3 && dataInfo.payType != 1 && Number(dataInfo.realPrice) != 0 && dataInfo.permission == false)"
      @spreadInvite="inviteFriends"
      @invitePoster="invitePoster"
      @goHelpDetail="goHelpDetail"
    >
      <div class="c-fs28 c-fc-white c-flex-row c-flex-center theme-bg c-br36 c-hh64 c-flex-grow1 c-w0" :class="dataInfo.isInvitationCard == 1 || dataInfo.isFriendHelper || dataInfo.collage || dataInfo.sales ? 'c-ml20' : ''" v-if="dataInfo.permission ==false&& dataInfo.isSaleTogether == 1 && dataInfo.isSaleAlone == -1&&packageList.length>0" @click="showCombo=true">
        <span class="c-fs28 c-lh">立即购买</span>
      </div>
      <div class="c-flex-grow1 c-w0 c-h c-flex-row c-flex-center c-fs28" :class="dataInfo.isInvitationCard == 1 || dataInfo.isFriendHelper || dataInfo.collage || dataInfo.sales ? 'c-ml20' : ''" v-else-if="!((dataInfo.isFriendHelper && companyAuth.enableFriendHelper == 1) || isSales || dataInfo.bargain) || dataInfo.payType == 3 || dataInfo.payType == 1 || Number(dataInfo.realPrice) == 0 || dataInfo.permission == true">
        <div class="c-hh64 c-w100">
          <div @click="clickBuy" v-if="dataInfo.permission == false && dataInfo.payType == 2 && Number(dataInfo.realPrice) != 0 && (companyAuth.enableFriendHelper == 0 || dataInfo.isFriendHelper == false) && !isSales" class="c-pv16 c-fs24 c-fc-white theme-bg c-br36 c-flex-row c-flex-center">
            立即购买
          </div>
          <div @click="inputPsw" v-if="dataInfo.permission == false && dataInfo.payType == 3" class="c-fc-white theme-bg c-br36 c-flex-row c-flex-center c-h">输入密码</div>
          <div @click="joinAndTest" v-if="dataInfo.permission == false && (dataInfo.payType == 1 || (dataInfo.payType == 2 && Number(dataInfo.realPrice) == 0)) && !(dataInfo.paperType == 5 && dataInfo.examModel == 2)" class="c-fc-white theme-bg c-br36 c-flex-row c-flex-center c-h">立即测试</div>
          <div @click="joinAndTest" v-if="dataInfo.permission == true && (dataInfo.paperType == 4 || (dataInfo.paperType == 5 && dataInfo.examModel == 1))" class="c-fc-white theme-bg c-br36 c-flex-row c-flex-center c-h">立即测试</div>
          <div @click="joinAndTest" v-if="(dataInfo.permission == true || (dataInfo.permission == false && (dataInfo.payType == 1 || (dataInfo.payType == 2 && Number(dataInfo.realPrice) == 0)))) && dataInfo.paperType == 5 && dataInfo.examModel == 2" class="c-fc-white theme-bg c-br36 c-flex-row c-flex-center c-h">学习</div>
        </div>
      </div>
      <div class="c-flex-row c-w100 c-hh64" v-if="dataInfo.payType != 3 && dataInfo.payType != 1 && Number(dataInfo.realPrice) != 0 && dataInfo.permission == false && companyAuth.enableFriendHelper == 1 && dataInfo.isFriendHelper == true">
        <div class="c-flex-column c-aligni-center theme-fc c-justify-sa theme-bd1 c-flex-1 c-br32 c-mr10" @click="clickBuy">
          <span class="c-fs22">{{'￥' | iosPriceFilter}}{{calculationPrice}}</span>
          <span class="c-fs20">{{getBuyBtnTitle}}</span>
        </div>
        <div class="c-flex-column c-flex-center c-fc-white c-flex-1 c-br32" :class="faStatus == 2 ? 'theme-bg-gradient' : 'c-bg-d7'" @click="goHelpDetail()">
          <span class="c-fs26">灌溉领取</span>
        </div>
      </div>
      <!-- 砍价信息不为空 -->
      <div class="c-flex-row c-w100 c-hh88 c-flex-center" v-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2) && dataInfo.permission == false">
        <div class="c-flex-column c-justify-sa c-aligni-center theme-fc c-hh64 theme-bd1 c-w50 c-br32 c-mr10" @click="clickBuy">
          <span class="c-fs22 c-lh">{{'￥' | iosPriceFilter}}{{calculationPrice}}</span>
          <span class="c-fs20 c-lh">{{getBuyBtnTitle}}</span>
        </div>
        <!-- 未发起砍价 -->
        <template v-if="dataInfo.bargain.userType == 1">
          <div class="c-flex-row c-flex-center c-fc-white c-hh64 c-w50 c-fs28 c-br32 theme-bg-gradient" @click="handleClickBargainDetail(dataInfo.bargain.bargainId)">正在砍价</div>
        </template>
        <template v-if="dataInfo.bargain.userType == -1">
          <div class="c-flex-column c-justify-sa c-aligni-center c-fc-white c-hh64 c-w50 c-br32"
            :class="(dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) ? 'c-bg-d7' : 'theme-bg-gradient'" @click="handleClickBargainDetail(dataInfo.bargain.bargainId)">
            <span class="c-fs22 c-lh">{{'￥' | iosPriceFilter}}{{Number(dataInfo.bargain.reservePrice).toFixed(2)}}</span>
            <span class="c-fs20 c-lh">砍价享</span>
          </div>
        </template>
      </div>
      <div @click="clickBuy" v-if="isSales && dataInfo.payType != 3 && dataInfo.payType != 1 && Number(dataInfo.realPrice) != 0 && dataInfo.permission == false" class="c-pv16 c-fs24 c-fc-white theme-bg-gradient c-w0 c-flex-grow1 c-flex-row c-flex-center c-br36">{{getBuyBtnTitle}}</div>
    </bottom-buy-com>
    <share-present :isShowPresent="isShowPresent" v-if="isShowPresent" @closePresent="isShowPresent=false;" @goPresent="clickBuy"></share-present>
    <comfirm-com :pwTip="dataInfo.passwordTip ? dataInfo.passwordTip : ''" :showPassword="showPassword" :noticeText="noticeText" :text="'请输入密码进入测试'" :placeholderText="'请输入密码'" @changePsw="changePsw" @closePassword="showPassword = false" @submitPassword="submitPassword"></comfirm-com>
    <coupon-list-com
      @closeModal="closeModal"
      @getCouponList="getCouponList"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :prodId="Number(paperMainId)"
      :prodType="77"
      :sales="dataInfo.sales"
      :collage="dataInfo.collage"
      :isMarketing="isMarketing"
      :dataInfo="dataInfo"
    >
    </coupon-list-com>
    <offical-account v-if="dataInfo && dataInfo.bargain" :showAccountQcode="showAccountQcode" :desc="officalDesc" :imgSrc="$addXossFilter(mpQrcode)" @hideDialog="hideDialog"></offical-account>
    <promote-income v-if="showInvitionCard || dataInfo.showMarketingCard" :showInvitionCard="showInvitionCard" :showMarketingCard="dataInfo.showMarketingCard" :prodId="paperMainId" :prodType="cfrom.voiceTest" @goInvite="inviteFriends" @goMarketingPoster="invitePoster"></promote-income>
    <!-- 关联弹窗 -->
    <combo-related-list  :tittle="'包含该AI测评的课程'" :minTittle="'购买所属的课程后可参与AI测评'" :packageList="packageList" @closeCombo="closeCombo" :showCombo="showCombo"></combo-related-list>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import sharePresent from "@/components/templates/common/presentMaster.vue";
import ComfirmCom from "@/components/templates/common/comfirmCom.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import couponListCom from "@/components/templates/couponListCom.vue";
import PackageIndexCom from "@/components/templates/packageIndexCom.vue";
import FlashSalesTimeNew from "@/components/templates/flashSalesTimeNew.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import BottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import PriceBar from '@/components/templates/common/priceBar.vue';
import bargainRules from '@/components/templates/bargain/bargainRules';
import officalAccount from '@/components/templates/common/officalAccount';
import PromoteIncome from '@/components/templates/common/promoteIncome.vue';
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import ComboRelatedList from "@/components/templates/common/comboRelatedList.vue";
import DiscountInfo from "@/components/templates/common/discountInfo.vue";
import VipEntry from "@/components/templates/common/vipEntry.vue";
let isClick = false;
let loading = false;
const THEME_RGB_MAP = global.THEME_RGB_MAP;
export default {
  name: "VoiceTestDetail",
  components: {
    DiscountInfo,
    VipEntry,
    sharePresent,
    ComfirmCom,
    loadingStatusTem,
    couponListCom,
    PackageIndexCom,
    FlashSalesTimeNew,
    MySmallTabbar,
    BottomBuyCom,
    PriceBar,
    bargainRules,
    officalAccount,
    PromoteIncome,
    ComboRelatedList
  },
  data() {
    return {
      tabList: [{
        title: '详情',
        index: 0,
      }, {
        title: '排行榜',
        index: 2,
      }],
      typeBar: 0,
      tabhBarFixed: false,
      paperMainId: "",
      dataInfo: "",
      cfrom: global.ckFrom,
      extId: -1,
      relationData: "",
      isShowPresent: false,
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      showShareMoneyTip: true,
      showPassword: false, //显示密码输入
      noticeText: '',
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      rankingList: [],
      scoringMethod: -1,
      page: 1,
      limit: 10,
      is_page: false,
      faStatus: 1,
      showCoupon: false,
      couponList: [],
      couponIsPage: false,
      couponPage: 1,
      couponLoading: false,
      packageList: [],
      ttId: "",
      tpId: "",
      tlId: "",
      progress: "",
      isSales: false,
      vipType: localStorage.getItem(`vipType${localStorage.getItem("userId")}`),
      vipFitstItem: localStorage.getItem("vipArr1") ? JSON.parse(localStorage.getItem("vipArr1")) : null,
      svipFitstItem: localStorage.getItem("svipArr1") ? JSON.parse(localStorage.getItem("svipArr1")) : null,
      cfg: JSON.parse(localStorage.getItem("cfg")),
      isSalesBegin: false, // 判断限时购是否正在进行
      showAccountQcode: false,
      officalDesc: '关注我们后才可发起砍价哦',
      mpQrcode: '', //二维码图片
      bindPhoneSetting: null,
      themeId: '', //来源圈子任务的主题id
      showCombo:false,
      optimal: null, // 最低价格对象
    };
  },
  computed: {
    showMarketingBar() {
      return this.dataInfo &&
        (
          this.dataInfo.sales ||
          (this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) ||
          (this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) ||
          this.dataInfo.isFriendHelper
        )
    },
    // 获取按钮专享价名称
    getBuyBtnTitle() {
      if (this.optimal) {
        const agentName = utilJs.getCustNameMap();
        let btnTxt = '立即购买';
        let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
          ? this.dataInfo.commonProdInfo.agentDiscount
          : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
            ? this.dataInfo.svipDiscount
            : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
              ? this.dataInfo.vipDiscount
              : 100
        let discountPrice = Number(this.dataInfo.price * idDiscount / 100).toFixed(2);
        btnTxt = discountPrice * 1 != this.dataInfo.price ? (this.vipType != 1 ? (this.vipType == 2 ? 'VIP专享价' : this.vipType == 4 ? 'SVIP专享价' : agentName[this.vipType] + '专享价') : '立即购买') : '立即购买';
        if (this.dataInfo.sales && this.optimal.optimalPriceType == 101) {
          btnTxt = '立即购买';
        }
        return btnTxt
      }
      return '立即购买'
    },
    showInvitionCard() {
      let showInvitionCardTmp = this.dataInfo.isInvitationCard == 1 && !this.dataInfo.isFriendHelper && this.dataInfo.collage == null && this.dataInfo.sales == null && this.dataInfo.bargain == null
      return showInvitionCardTmp
    },
    //营销原价计算价格
    calculationPrice() {
      let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
          ? this.dataInfo.commonProdInfo.agentDiscount
          : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
            ? this.dataInfo.svipDiscount
            : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
              ? this.dataInfo.vipDiscount
              : 100
      let calculationPrice = Number(this.dataInfo.price * idDiscount / 100).toFixed(2)
      return calculationPrice;
    },
    //1单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = this.dataInfo.isSaleOnly != 0 && this.dataInfo.permission == false && Number(this.dataInfo.price) > 0 && !this.dataInfo.isFriendHelper
      return showdiscount
    },
    //是否是营销活动
    isMarketing() {
      let isMarketing = this.dataInfo && (this.dataInfo.sales || (this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) || this.dataInfo.isFriendHelper)
      return isMarketing
    },
    //大转盘是否显示
    showTurn() {
      let showturn = this.dataInfo.joinActivityInfo && this.dataInfo.joinActivityInfo.isJoinActivity == 1
      return showturn;
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  watch: {},
  methods: {
    closeCombo: function () {
      this.showCombo = false;
    },
    hideDialog() {
      this.showAccountQcode = false;
    },
    // 判断是否关注公众号
    checkUserIsFollowedMp() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        utilJs.getMethod(`${global.apiurl}bargains/getMpData?bargainId=${_this.dataInfo.bargain.bargainId}`,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    handleClickBargainDetail(bargainId) {
      if (this.dataInfo.bargain.status == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能砍价！',
          type: 'warn'
        });
        return;
      }
      this.checkUserIsFollowedMp().then(res => {
        if (res.threshold == 2 && res.isFollowedMp == 0) {
          this.mpQrcode = res.mpQrcode;
          this.showAccountQcode = true;
          return;
        }
        // 判断是否绑定手机号
        if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind) {
          if (utilJs.goBindMobile()) return;
        }
        if (this.dataInfo.bargain.status == 2) {
          this.$routerGo(this, "push", {
            path: "/homePage/bargain/bargainDetail",
            query: {
              bargainId: bargainId
            }
          });
        }
      })
    },
    // 营销活动倒计时
    falshSalesTime(status) {
      if (this.dataInfo.sales) {
        this.dataInfo.sales.sales.status = status
      } else if (this.dataInfo.collage) {
        this.dataInfo.collage.status = status
      } else if (this.dataInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.dataInfo.bargain) {
        this.dataInfo.bargain.status = status
      }
    },
    // 营销活动倒计时结束
    finishFlashSales(status) {
      if (this.dataInfo.sales) {
        this.dataInfo.sales.sales.status = status;
        if (status == 2) {
          this.isSales = true;
        }
      } else if (this.dataInfo.collage) {
        this.dataInfo.collage.status = status
      } else if (this.dataInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.dataInfo.bargain) {
        this.getDetailList();
      }
      // 活动已结束，清空所有营销活动信息及状态
      if (status == -1) {
        this.dataInfo.sales = null;
        this.isSales = false;
        this.dataInfo.collage = null;
        this.dataInfo.isFriendHelper = false;
      }
    },
    clickDesc(e) {
      if (e.target.tagName == 'IMG' && e.target.src) {
        wxUtilJs.previewImage({
          current: e.target.src, // 当前显示图片的http链接
          urls: [e.target.src] // 需要预览的图片http链接列表
        });
      }
    },
    closeModal() {
      this.showCoupon = false;
    },
    //获取可以领取的优惠券
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + this.paperMainId + '&redeemType=89&limit=10&page=' + this.couponPage, function (res) {
          $this.couponLoading = false;
          $this.couponList = $this.couponList.concat(res.data);
          $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
          $this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            $this.couponLoading = false;
          }
        );
      }
    },
    //活动海报
    invitePoster: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = this.cfrom.voiceTest;//this.ckFrom;
      let type = this.dataInfo.collage ? 3 : this.dataInfo.sales ? 2 : this.dataInfo.bargain ? 5 : 4;
      let cId = this.dataInfo.isFriendHelper ? this.dataInfo.faId : this.dataInfo.collage ? this.dataInfo.collage.collageId : this.dataInfo.bargain ? this.dataInfo.bargain.bargainId : this.dataInfo.sales.pId;
      let proId = this.paperMainId;
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadPoster', query: { cId: cId, type: type, ckFrom: ckFrom, proId: proId } });
    },
    goHelpDetail() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.helpBind && utilJs.goBindMobile()) {
        return
      }
      if (this.faStatus == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能助力领取！',
          type: 'warn'
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/task/task",
          query: { 'faId': this.dataInfo.faId, 'refereeId': localStorage.getItem("userId") }
        });
      }
    },
    inviteFriends: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: { cId: -1, extId: this.paperMainId, ckFrom: this.cfrom.voiceTest }
      });
    },
    changeType: function (type) {
      //this.typeBar = typeBar;
      if (this.typeBar != type) {
        this.typeBar = type;
        this.handleScroll();
        if (this.typeBar == 2) {
          if (this.rankingList.length > 0) {
            return;
          }
          this.getRank();
        }
      }
      return false;
    },
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var offsetTop = document.querySelector('#tabhBar').offsetTop != null ? document.querySelector('#tabhBar').offsetTop : 68;
      if (scrollTop >= offsetTop) {
        this.tabhBarFixed = true;
      } else {
        this.tabhBarFixed = false;
      }
    },
    testNow() {
      if (this.dataInfo.hasStart == 0) {
        if (this.dataInfo.paperType == 5 && this.dataInfo.examModel == 2) {
          if (this.dataInfo.permission == false && (this.dataInfo.consumeType == 1 || (this.dataInfo.consumeType == 2 && Number(this.dataInfo.realPrice) == 0))) {
            if (isClick) {
              return;
            }
            isClick = true;
            utilJs.postMethod(
              global.apiurl + "mutual/buildRelated", {
                type: this.dataInfo.payType == 1 ? 1 : 2,
                paperMainId: this.paperMainId
              },
              res => {
                isClick = false;
                if (res.status == 1) {
                  this.$routerGo(this, "push", {
                    path: "/homePage/voiceTest/speechStudy",
                    query: { paperMainId: this.paperMainId, hasStart: this.dataInfo.hasStart, goOnNum: this.dataInfo.goNum, ttId: this.ttId, tpId: this.tpId, tlId: this.tlId, progress: this.progress }
                  });
                }
              },
              failRes => {
                isClick = false;
              }
            );
          } else {
            this.$routerGo(this, "push", {
              path: "/homePage/voiceTest/speechStudy",
              query: { paperMainId: this.paperMainId, hasStart: this.dataInfo.hasStart, goOnNum: this.dataInfo.goNum, ttId: this.ttId, tpId: this.tpId, tlId: this.tlId, progress: this.progress }
            });
          }
        } else {
          this.$routerGo(this, "push", {
            path: "/homePage/voiceTest/voiceTestAnswer",
            query: { paperMainId: this.paperMainId, topicId: 0, goOnNum: 1, ttId: this.ttId, tpId: this.tpId, tlId: this.tlId, progress: this.progress }
          });
        }
      } else if (this.dataInfo.hasStart == 1) {
        if (this.dataInfo.paperType == 5 && this.dataInfo.examModel == 2) {
          if (this.dataInfo.permission == false && (this.dataInfo.payType == 1 || (this.dataInfo.payType == 2 && Number(this.dataInfo.realPrice) == 0))) {
            if (isClick) {
              return;
            }
            isClick = true;
            utilJs.postMethod(
              global.apiurl + "mutual/buildRelated", {
                type: this.dataInfo.payType == 1 ? 1 : 2,
                paperMainId: this.paperMainId
              },
              res => {
                isClick = false;
                if (res.status == 1) {
                  this.$routerGo(this, "push", {
                    path: "/homePage/voiceTest/speechStudy",
                    query: { paperMainId: this.paperMainId, hasStart: this.dataInfo.hasStart, goOnNum: this.dataInfo.goNum, ttId: this.ttId, tpId: this.tpId, tlId: this.tlId, progress: this.progress }
                  });
                }
              },
              failRes => {
                isClick = false;
              }
            );
          } else {
            this.$routerGo(this, "push", {
              path: "/homePage/voiceTest/speechStudy",
              query: { paperMainId: this.paperMainId, hasStart: this.dataInfo.hasStart, goOnNum: this.dataInfo.goNum, ttId: this.ttId, tpId: this.tpId, tlId: this.tlId, progress: this.progress }
            });
          }
        } else {
          if (this.dataInfo.goNum == 1) {
            this.$routerGo(this, "push", {
              path: "/homePage/voiceTest/voiceTestAnswer",
              query: { paperMainId: this.paperMainId, topicId: 0, goOnNum: 1, ttId: this.ttId, tpId: this.tpId, tlId: this.tlId, progress: this.progress }
            });
          } else {
            this.$routerGo(this, "push", {
              path: "/homePage/voiceTest/voiceTestAnswer",
              query: { paperMainId: this.paperMainId, topicId: 0, goOnNum: this.dataInfo.goNum, ttId: this.ttId, tpId: this.tpId, tlId: this.tlId, progress: this.progress }
            });
          }
        }
      } else if (this.dataInfo.hasStart == 2) {
        if (this.dataInfo.paperType == 5 && this.dataInfo.examModel == 2) {
          if (this.dataInfo.permission == false && (this.dataInfo.payType == 1 || (this.dataInfo.payType == 2 && Number(this.dataInfo.realPrice) == 0))) {
            if (isClick) {
              return;
            }
            isClick = true;
            utilJs.postMethod(
              global.apiurl + "mutual/buildRelated", {
                type: this.dataInfo.payType == 1 ? 1 : 2,
                paperMainId: this.paperMainId
              },
              res => {
                isClick = false;
                if (res.status == 1) {
                  this.$routerGo(this, "push", {
                    path: "/homePage/voiceTest/speechStudy",
                    query: { paperMainId: this.paperMainId, hasStart: this.dataInfo.hasStart, goOnNum: this.dataInfo.goNum, ttId: this.ttId, tpId: this.tpId, tlId: this.tlId, progress: this.progress }
                  });
                }
              },
              failRes => {
                isClick = false;
              }
            );
          } else {
            this.$routerGo(this, "push", {
              path: "/homePage/voiceTest/speechStudy",
              query: { paperMainId: this.paperMainId, hasStart: this.dataInfo.hasStart, goOnNum: this.dataInfo.goNum, ttId: this.ttId, tpId: this.tpId, tlId: this.tlId, progress: this.progress }
            });
          }
        } else {
          this.$routerGo(this, "push", {
            path: "/homePage/voiceTest/voiceTestResult",
            query: { paperMainId: this.paperMainId, ttId: this.ttId, tpId: this.tpId, tlId: this.tlId, progress: this.progress }
          });
        }
      }
    },
    joinAndTest() {
      if (isClick) {
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      isClick = true;
      if (this.dataInfo.hasStart == 0) {
        utilJs.postMethod(global.apiurl + "mutual/buildRelated", {
          type: this.dataInfo.permission && this.dataInfo.payType == 3 ? 1 : this.dataInfo.payType,
          paperMainId: this.paperMainId
        }, res => {
          isClick = false;
          if (res.status == 1) {
            this.testNow();
          }
        },
        failRes => {
          isClick = false;
        }
      );
      } else {
        isClick = false;
        this.testNow()
      }
    },
    //提交密码
    submitPassword(inputPwd) {
      if (isClick) {
        return;
      }
      isClick = true;
      utilJs.postMethod(
        global.apiurl + "mutual/buildRelated", {
          password: inputPwd,
          type: this.dataInfo.permission ? 1 : 3,
          paperMainId: this.paperMainId
        },
        res => {
          isClick = false;
          if (res.status == 2) {
            this.noticeText = "*密码错误";
          } else if (res.status == 1) {
            this.showPassword = false;
            this.testNow();
          }
        },
        failRes => {
          isClick = false;
        }
      );
    },
    changePsw() {
      this.noticeText = "";
    },
    inputPsw() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.passwordBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.noticeText = "";
      this.showPassword = true;
    },
    clickBuy() {
      // 判断体验版是否到期，到期之后不可购买商品
      if (utilJs.alertShopExpire(this, utilJs.getTimeByDate(this.companyAuth.expireTime))) return true;
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind) {
        let pathQuery = {};
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        if (utilJs.goBindMobile(pathQuery)) return;
      }
      let pathQuery = {
        cId: -1,
        extId: this.paperMainId,
        ckFrom: this.cfrom.voiceTest,
        isFromInvite: 0,
      };
      if (this.isSales && (this.optimal && this.optimal.optimalPriceType == 101)) {
        pathQuery.pId = this.dataInfo.sales.pId;
        pathQuery.ckFrom = this.cfrom.flashSalesVoiceTest;
      }
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      this.$routerGo(this, "push", {
        path: '/homePage/course/coursePay',
        query: pathQuery
      });
      //   }
    },
    getRank() {
      let $this = this;
      if (loading) {
        return;
      }
      loading = true;
      utilJs.getMethod(global.apiurl + 'exam/rankingList/' + this.paperMainId + '?page=' + this.page, function (res) {
        loading = false;
        // $this.myRanking = res.myRank;

        $this.scoringMethod = res.scoringMethod;

        // if ($this.scoringMethod == 1) {
        //   $this.myRanking.accuracy = Number($this.myRanking.accuracy * 100).toFixed(0);
        // }

        for (var i = 0; i < res.rankingList.data.length; i++) {
          if ($this.scoringMethod == 1) {
            res.rankingList.data[i].accuracy = Number(res.rankingList.data[i].accuracy * 100).toFixed(0);
          }
        }
        $this.rankingList = $this.rankingList.concat(res.rankingList.data);
        $this.page = res.rankingList.data && (res.rankingList.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? (this.page + 1) : this.page;
        $this.is_page = res.rankingList.data && (res.rankingList.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page ? true : false;
      },
        failRes => {
          loading = false;
        });
    },
    getRelatePackage(tabType) {
      if (!this.belongLoading) {
        this.belongLoading = true;
        let $this = this;
        // if (tabType == 2) {+ '&page=' + this.pagePackage + '&limit=10' + '&tabType=' + tabType
          let getUrl = `${global.apiurl}common/saleTogetherList`;
          utilJs.getMethod(getUrl + "?prodId=" + $this.paperMainId + '&prodType=' + global.ckFrom.voiceTest, function (res) {
            $this.belongLoading = false;
            $this.packageList = res
            // if ($this.pagePackage == 1) { //从课程刚进来页面的时候需要获取专栏列表，第二页开始不需要了
            //   $this.packageList = res.list.combos.data;
            // }
            // $this.pagePackage = res.list.combos.current_page < res.list.combos.last_page ? ($this.pagePackage + 1) : $this.pagePackage;
            // $this.is_page_package = res.list.combos.current_page < res.list.combos.last_page ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        // }
      }
    },
    //跳转至大转盘
    goTOturn() {
      let $this = this
      $this.$routerGo($this, "push", {
        path: "/homePage/marketing/turntable",
        query: {
          taId: $this.dataInfo.joinActivityInfo.activityData.id
        }
      });
    },
    getDetailList() {
      let $this = this;
      let postUrl = global.apiurl + "mutual/detail/" + this.paperMainId + "?isSkeleton=1";
      if (this.themeId) {
        postUrl = postUrl + `&themeId=${this.themeId}`
      }
      utilJs.getMethod(postUrl,
        function (res) {
          if (JSON.stringify(res) === '[]') {
            $this.$routerGo($this, "replace", { path: "/error/emptyPage", query: { from: '', info: '该语音测评已下架或删除，请联系管理员！' } });
          } else {
            $this.dataInfo = res;
            // optimalPriceType：1 产品本身价格 2 vip价格 3 svip价格 4 服务商 101 限时购 102 拼团 112 砍价  10 链动会员 20 链动代理商 99 链动复购
            $this.optimal = res.optimal || null;
            if ($this.dataInfo.isGrounding != 1) {
              $this.$routerGo($this, "replace", {
                path: "/error/emptyPage",
                query: {
                  from: "mutuaTest",
                  info: "很抱歉，该语音测试已下架"
                }
              });
              return;
            }
            if ($this.dataInfo.isShowRanking == -1) {
              $this.tabList = [{
                title: '详情',
                index: 0,
              }]
            };
            $this.typeBar = 0;//(res.isDirShow == 0 && res.hasPermission == false) ? 0 : (res.tabsType == 1 ? 0 : 2);
            if (res.sales != null && res.sales.status && (res.sales.limit == 0 || res.sales.balance > 0) && $this.companyAuth.enableFlashSalesModule == 1) {
              let nt = (new Date()).getTime();
              let st = utilJs.getTimeByDate(res.sales.sales.startTime);
              let et = utilJs.getTimeByDate(res.sales.sales.endTime);
              if (nt >= st && nt < et && $this.dataInfo.sales.sales.status > -1) {
                $this.isSales = true;
                $this.dataInfo.sales.sales.status = 2;
              } else if (nt < st && $this.dataInfo.sales.sales.status == 1) {
                $this.isSales = false;
                $this.dataInfo.sales.sales.status = 1;
                // $this.dataInfo.sales = null;
              } else if (nt >= et && $this.dataInfo.sales.sales.status == 2) {
                $this.dataInfo.sales.sales.status = -1;
                $this.dataInfo.sales = null;
              } else {
                $this.dataInfo.sales = null;
              }
            } else {
              $this.dataInfo.sales = null;
            }
            $this.dataInfo.showMarketingCard = $this.dataInfo.isFriendHelper || $this.dataInfo.collage || $this.dataInfo.sales || $this.dataInfo.bargain;
            if ($this.dataInfo.joinActivityInfo && $this.dataInfo.joinActivityInfo.isShowDialog == 1) {
              $this.$cjConfirm({
                title: '', //
                titleCenter: true, //标题是否居中
                message: '恭喜！您获得了大转盘抽奖机会！',
                messageCenter: true, //内容是否居中
                showMasker: true, //是否显示透明背景
                clickCloseModal: false, //是否点击透明背景关闭弹窗
                showCancelButton: true, //是否显示取消按钮
                cancelButtonText: '稍后再说', //取消按钮文本
                confirmButtonText: '立刻前往', //确认按钮文本
                onConfirm() {
                  $this.$routerGo($this, "push", {
                    path: "/homePage/marketing/turntable",
                    query: {
                      taId: $this.dataInfo.joinActivityInfo.activityData.id
                    }
                  });
                }
              })
            }

            // if (res.isFriendHelper) { //友情灌溉
            //   let stime = $this.dataInfo ? utilJs.getTimeByDate($this.dataInfo.faStartAt) : 0;
            //   let etime = $this.dataInfo ? utilJs.getTimeByDate($this.dataInfo.faEndAt) : 0;
            //   let nowTime = (new Date()).getTime();
            //   //faStatus 1未开始,2进行中,-1已结束
            //   if (stime > nowTime) {
            //     $this.faStatus = 1;
            //   } else if (etime > nowTime) {
            //     $this.faStatus = 2;
            //   }
            // }
            $this.wechatShare();
            $this.$nextTick(function () {
              window.addEventListener('scroll', $this.handleScroll);
            });
          }
          if (res.sales && res.sales.sales) {
            $this.isSalesBegin = (res.sales.sales.startTime).replace(/\s+|[-]|[:]/g, "") <= (utilJs.getNowTime()).replace(/\s+|[-]|[:]/g, "") ? true : false;
          }
        }
      );
    },
    //分享
    wechatShare: function () {
      let title = this.dataInfo.name;
      let shareImg = this.dataInfo.sales ? this.dataInfo.sales.shareImg : this.dataInfo.avatar;
      let shareUrl = window.location.href.split("#")[0] + '#' + '/homePage/voiceTest/voiceTestDetail?paperMainId=' + this.paperMainId + "&refereeId=" + localStorage.getItem("userId");
      let shareDesc = this.dataInfo.description;//"共包含"+this.examinationInfo.hasPaper+"套考卷";
      if (this.dataInfo.sales) {
        title = `【限时抢购】${title}`;
      }
      if (this.dataInfo.payType != 3 && this.dataInfo.payType != 1 && this.companyAuth.enableFriendHelper == 1 && this.dataInfo.isFriendHelper == true) {
        title = '【快来帮我灌溉吧】' + title;
      }
      if (this.dataInfo.bargain != null && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      var title = this.dataInfo.name;
      var shareImg = this.dataInfo.sales ? this.dataInfo.sales.shareImg : this.dataInfo.avatar;
      var shareUrl = window.location.href.split("#")[0] + '#' + '/homePage/voiceTest/voiceTestDetail?paperMainId=' + this.paperMainId + "&refereeId=" + localStorage.getItem("userId");
      var shareDesc = this.dataInfo.description;
      if (this.dataInfo.sales) {
        title = `【限时抢购】${title}`;
      }
      if (this.dataInfo.payType != 3 && this.dataInfo.payType != 1 && this.companyAuth.enableFriendHelper == 1 && this.dataInfo.isFriendHelper == true) {
        title = '【快来帮我灌溉吧】' + title;
      }
      if (this.dataInfo.bargain != null && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("语音测评详情");// eslint-disable-line
    this.tabList = [{
      title: '详情',
      index: 0,
    }, {
      title: '排行榜',
      index: 2,
    }];
    this.typeBar = 0;
    this.tabhBarFixed = false;
    this.paperMainId = this.$route.query.paperMainId;
    this.dataInfo = "";
    this.relationData = "";
    this.isShowPresent = false;
    this.showShareMoneyTip = true;
    this.page = 1;
    this.rankingList = [];
    this.cloroRGB = THEME_RGB_MAP[this.theme];
    this.faStatus = 1;
    this.couponPage = 1;
    this.couponIsPage = false;
    this.couponLoading = false;
    this.showCoupon = false;
    this.couponList = [];
    this.packageList = [];
    this.isSales = false;
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.progress = this.$route.query.progress || "";
    this.themeId = this.$route.query.themeId || '';
    this.goodsRoomId = this.$route.query.goodsRoomId || '';
    this.optimal = null;
    getBindPhoneSetting(global.ckFrom.voiceTest).then(res => {
      this.bindPhoneSetting = res;
    });
    this.getDetailList();
    this.getRelatePackage();
    this.getCouponList();
  },
  deactivated() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  destroyed() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.closeBig >>> p > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 1.3rem;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 900;
}
.c-ww54 {
  width: 1.35rem;
}
.c-pl18 {
  padding-left: 0.45rem;
}
.yqAnimation {
  animation: yqAni 3s linear infinite;
  -webkit-animation: yqAni 3s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@keyframes yqAni {
  0% {
    width: 0.8rem;
  }
  8% {
    width: 0;
  }
  16% {
    width: 0.8rem;
  }
  100% {
    width: 0.8rem;
  }
}
</style>
